<template>
  <div class="login-page">
    <div class="login-content">
      <van-nav-bar >
        <template #title>
          <div class="title">
            登录
          </div>
        </template>
      </van-nav-bar>
      <van-form @submit="onSubmit">
        <van-field
          v-model="loginForm.userAccount"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="loginForm.userPassword"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button
            block
            type="primary"
            native-type="submit"
          >登录</van-button>
        </div>
      </van-form>
      <div
        class="link"
        @click="onRegister"
      >
        还没有账号,去注册
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import router from '@/router/index.js'
import { useUserStore } from '@/stores/userStore'
import { showNotify } from 'vant'

const userStore = useUserStore()

const loginForm = ref({
  userAccount: 'sbsb',
  userPassword: 'sbsbsb'
})

const onSubmit = async () => {
  try {
    await userStore.onLogin(loginForm.value)
  } catch (error) {
    showNotify({ type: 'danger', message: error.message })
  }
}

const onRegister = () => {
  router.push('/register')
}
</script>

<style scoped>
.login-page {
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
  background-image: url("@/assets/img/login.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.9;
  .login-content {
    margin: auto;
    padding: 10px 10px 20px 10px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
    .title{
      font-size: 20px;
      font-weight: 600;
    }
  }

  .link {
    font-size: 12px;
    color: #069;
    float: right;
    margin-right: 15px;
  }
}
</style>